<form id="formadd" method="post">
<div class="container well">
  <!-- * * * * * * *BARRA SUPERIOR * * * * * * *   -->
  <div class="row">
    <div class="span6">
      <b>Local:
      <?php echo $this->form->loc_nombre->getValue(); ?>
      </b>&nbsp;
      <input placeholder="Boleta nro." type="text">
    </div>
    <div class="span4 offset2">
      <h4><b><div id="top_total_final"></div></b></h4>
    </div>
  </div>
<div class="tabbable">
  <!-- * * * * * * * PESTAÑAS DE LOS TABS * * * * * -->
  <ul class="nav nav-tabs" id="listaTab">
    <li id="htab1" class="active"> <a href="#tab1" data-toggle="tab"><span class="badge badge-info">1</span> Agrega Vendedor</a></li>
    <li id="htab2">                <a href="#tab2" data-toggle="tab"><span class="badge badge-info">2</span> Agrega Inventario</a></li>
    <li id="htab3">                <a href="#tab3" data-toggle="tab"><span class="badge badge-info">3</span> Forma de Pago</a></li>
    <li id="htab4">                <a href="#tab4" data-toggle="tab"><span class="badge badge-info">4</span> Otro</a></li>
    <li id="htab5">                <a href="#tab5" data-toggle="tab"><span class="badge badge-info">5</span> Finaliza Venta</a></li>
  </ul>
  <div class="tab-content">

  <!-- * * * * * * * AGREGAR VENDEDOR ( TAB 1 ) * * -->
  <div class="tab-pane active" id="tab1">
      <div class="well btn-danger">
        <table>
          <tr>
            <td><b>Asignar Vendedor:</b></td>
          </tr>
          <tr>
            <td><b>&nbsp;</b></td>
          </tr>
          <tr>
            <td>
              <?php echo $this->form->usu_id_usuario; ?>
            </td>
          </tr>
        </table>
      </div>
  </div>
  <!-- * * * * * * * AGREGAR INVENTARIO ( TAB 2 ) * -->
  <div class="tab-pane" id="tab2">
      <div class="well btn-warning">
        <div class="row">
          <div class="span6">
          <table class="table">
              <tr>
                <th class="span2">Código</th>
                <th class="span1">Cantidad</th>
                <th class="span1">Talla</th>
                <th class="span2">&nbsp;</th>
              </tr>
              <tr>
                <td>
                  <div class="input-append">
                  <?php echo $this->form->mer_codigo; ?>
                  <?php echo $this->form->btn_mer_codigo; ?>
                  </div>
                </td>
                <td>
                  <?php echo $this->form->f_num_mercaderia; ?>
                </td>
                <td>
                  <select id="mer_id_mercaderia" onchange="getDataPrecio()" tabindex="4" class="input-mini jumper1">
                  </select>
                </td>
                <td>
                  <button name="botonGuardar" id="botonGuardar" type="button" class="btn btn-info jumper1" onclick="guardarString()" tabindex="5">Agregar</button>
                  <button name="botonLimpiar" id="botonLimpiar" type="button" class="btn jumper1" onclick ="limpiarString()" tabindex="6">Limpiar</button>
                </td>
              </tr>
              <tr>
                <th>Artículo</th>
                <th>Color</th>
                <th>Precio</th>
                <th>Total Precio</th>
              </tr>
              <tr>
                <td><?php echo $this->form->mer_articulo; ?></td>
                <td><?php echo $this->form->col_nombre; ?></td>
                <td><?php echo $this->form->hme_precio; ?></td>
                <td><?php echo $this->form->f_total_mercaderia; ?></td>                
              </tr>
          </table>
        </div>
          <div class="span5">
          <td rowspan="5" class="span4">
            <?php echo $this->form->mer_foto; ?>
            <img id="mer_foto_mini" src="" class="img-rounded" height="200px" width="200px" float="left" />
          </td>
          </div>
        </div>
      </div>
    </div>
  <!-- * * * * * * * FORMA DE PAGO ( TAB 3 ) * * *  -->
  <div class="tab-pane" id="tab3">
      <div class="row">
        <div class="span6">
          <div class="well btn-info">
            <p>
              <span><b>Forma de pago del cliente:</b></span>
            </p>
            <table>
              <thead>
                <tr>
                  <th>Forma de Pago</th>
                  <th>Monto</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <?php echo $this->form->tip_id_tipo_pago; ?>
                  </td>
                  <td>
                    <?php echo $this->form->f_pago_monto; ?>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="span6">
          <div class="well btn-success">
            <p>
              <span><b>Extras de pago:</b></span>
            </p>
            <table>
              <thead>
                <tr>
                  <th class="span3">Extra</th>
                  <th class="span3">Valor</th>
                </tr>
              </thead>
              <tbody>
                <tr id="p_cheque">
                  <td>Código Validación Cheque:</td>
                  <td><?php echo $this->form->tphv_codigo_cheque; ?></td>

                </tr>
                <tr id="p_credito_1">
                  <td>Nro. Cuotas:</td>
                  <td><?php echo $this->form->tphv_cant_cuotas; ?></td>

                </tr>
                <tr id="p_credito_2">
                  <td>Cuota Aprox.:</td>
                  <td><?php echo $this->form->f_monto_cuota; ?></td>

                </tr>
                <tr id="p_credito_smo">
                  <td>Datos del Vale:</td>
                  <td><?php echo $this->form->tphv_observacion_smo; ?></td>

                </tr>
              </tbody>
            </table>
          </div>

        </div>
      </div>
    </div>
  <!-- * * * * * * * OTRO ( TAB 4 ) * * * * * * * * -->
  <div class="tab-pane" id="tab4">
        <div class="well">
        <p>
          <span><b>Otro:</b></span>
        </p>
        <table>
          <thead>
            <tr>
              <th>Tipo</th>
              <th><span class="pull-left">Cantidad</span></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
              <?php echo $this->form->des_id_descuento; ?>
              </td>
              <td>
              <?php echo $this->form->f_descuento_monto; ?>
              </td>
            </tr>
          </tbody>
        </table>
        </div>
    </div>
  <!-- * * * * * * * FINALIZAR VENTA ( TAB 5 )* *  -->
    <div class="tab-pane" id="tab5">
      <div class="row">
        <div class="span6">
          <p>
            <span><b>Venta:</b></span>
            <span class="pull-right"><button class="btn btn-mini" href="#tab1" data-toggle="tab">Agregar <img class="icon-plus"></button></span>
          </p>
          <div>
            <ul class="thumbnails">
              <li class="span2">
                <div class="thumbnail">
                  <img src="https://s3.amazonaws.com/jetstrap-site/images/what_icon.png">
                  <h5>codigo</h5>
                  <p>cantidad + precio</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="span6">
          <div class="well">
            <b>Productos:</b>
            <ul id="res_productos">
              <li>codigo, talla, color, cantidad, precio</li>
            </ul>
            <ul>
              <li id="res_total"><b>Total: $129.800</b></li>
            </ul>
            <b>Resumen:</b>
            <ul>
              <li id="res_vendedor">Vendedor: Xasdasd Ysadasdasds</li>
              <li id="res_formapago">Forma Pago: Credito, $129000 , Efectivo: $800 </li>
              <li id="res_descuento">Descuento: $2000</li>
            </ul>
            <?php echo $this->form->submit; ?>
          </div>
        </div>
      </div>
    </div>
  <!-- * * * * * * * * * * FIN TABS  * * * * * * *  -->
  </div>
</div>

  <!-- * * * * * * * TABLA DE LA VENTA (INV)* * * * -->
  <div class="row">
    <div class="span6">
      <table id="stringMercanciaTable" class="table table-bordered table-condensed">
      <thead><th>Código</th><th>Cantidad</th><th>Talla</th><th>Precio</th></thead>
      <tbody></tbody>
      </table>
    </div>
  <!-- * * * * * *  VALORES TOTALES DE LA VENTA * * -->
    <div class="span6">
      <table class="table pull-right table-condensed">
        <tbody>
          <tr>
            <td>Total:</td><td><?php echo $this->form->f_total; ?></td>
          </tr>
          <tr>
            <td>Dcto:</td><td><?php echo $this->form->f_dcto; ?></td>
          </tr>
          <tr>
            <td>Vuelto:</td><td><?php echo $this->form->f_vuelto; ?></td>
          </tr>
          <tr>
            <td>Total Final:</td><td><?php echo $this->form->f_total_final; ?></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <!-- * * * * * BOLETA, MERCADERIA, SUBMIT, RETURNURL * * * -->
<?php echo $this->form->loc_nombre; ?>
<?php echo $this->form->stringMercanciaInput; ?>
<?php echo $this->form->tipoSubmit; ?>
<?php echo $this->form->returnUrl; ?>
</div>
</form>

<!-- TECLAS DE NAVEGACION -->
<style type="text/css">
  input:focus {
    background: #fc9fff;   /* sexy hot pink */
    border: solid 4px #DFDFDF; 
  }
   select:focus {
    background: #fc9fff;   /* sexy hot pink */
    border: solid 4px #DFDFDF; 
  }
  button:focus {
    background: #fc9fff;   /* sexy hot pink */
    border: solid 4px #DFDFDF; 
  }
</style>
<script>
$(document).keydown(function (e) {
  var keyCode = e.keyCode || e.which,
      arrow = {left: 37, up: 38, right: 39, down: 40 };

  switch (keyCode) {
    case arrow.left:
      flechaIzq();
    break;
    case arrow.up:
        $('[class*="primero"]').focus();
    break;
    case arrow.right:
      flechaDer();
    break;
    case arrow.down:
        $('[class*="primero"]').focus();
    break;
  }
});

function flechaIzq(){
  var newIndice = $('#listaTab li.active').prev().index();
  if(newIndice == '-1'){
    newIndice = $('#listaTab li.active').siblings().last().index();
  }
  var selector = '#listaTab li:eq('+newIndice+') a';
  $(selector).tab('show');
}

function flechaDer(){
  var newIndice = $('#listaTab li.active').next().index();
  if(newIndice == '-1'){
    newIndice = $('#listaTab li.active').siblings().first().index();
  }
  var selector = '#listaTab li:eq('+newIndice+') a';
  $(selector).tab('show');
}

$(":input:first").focus();
</script>
<!-- FIN TECLAS DE NAVEGACION -->

  <!-- * * * * * * * FUNCIONES JAVA SCRIPT * * * * -->
<script>
function calcularVuelto(){
  if( $('#f_total_final').val() == "" )     $('#f_total_final').val('0');
  
  var f_total_final = parseInt( $('#f_total_final').val() );
  var f_pago_monto = parseInt( $('#f_pago_monto').val() );
  if($('#tip_id_tipo_pago option:selected').text() == "Efectivo"){
    $('#f_vuelto').val( f_pago_monto - f_total_final );
  }
  else{
    $('#f_vuelto').val( "0" );
  }
}

function calcularPago(){      //AL ONCLICK TIPO FORMA DE PAGO
  if( $('#f_total_final').val() == "" )     $('#f_total_final').val('0');
  if( $('#f_pago_monto').val() == "" )      $('#f_pago_monto').val('0');
  
  var f_total_final = parseInt( $('#f_total_final').val() );

  $('#f_pago_monto').val( f_total_final );
}

function calcularDescuento(){
  if( $('#f_total').val() == "" )                $('#f_total').val('0');
  if( $('#f_dcto').val() == "" )                $('#f_dcto').val('0');
  if( $('#f_descuento_monto').val() == "" )     $('#f_descuento_monto').val('0');

  var str = $('#des_id_descuento option:selected').text();
  str = str.split("(");
  var str2 = str[1].split("%");

  var f_total = parseInt( $('#f_total').val() );
  var f_descuento_monto =   parseInt ( f_total * ( parseInt( str2[0] )/100 ) );

  $('#f_dcto').val( f_descuento_monto );
  $('#f_descuento_monto').val( f_descuento_monto );
  calcularValoresTotales();
}

function guardarString(){
  if($('#mer_codigo').val() != null && $('#mer_codigo').val() != ""){
    var inicioStrInput = $('#stringMercanciaInput').val();

    if( inicioStrInput != ""){
      inicioStrInput +='-';
    }
    var inventarioStr=
      '<td>'+$('#mer_codigo').val()+'</td><td>'+$('#f_num_mercaderia').val()+'</td>';
    var inventarioStrInput= 
      '|'+$('#mer_codigo').val()+'|'+$('#f_num_mercaderia').val()+'|';

    inventarioStr+= '<td>'+$('#mer_id_mercaderia option:selected').text() +'</td>';
    inventarioStrInput+= $('#mer_id_mercaderia option:selected').text() +'|';

    inventarioStr+= '<td>'+$('#f_total_mercaderia').val() +'</td>';
    inventarioStrInput+= $('#f_total_mercaderia').val() +'|';

    $('#stringMercanciaTable').find('tbody:last').append("<tr>"+inventarioStr+"</tr>");
    $('#stringMercanciaInput').val( inicioStrInput + inventarioStrInput );

    agregarValorMercaderia();
  }
}

function limpiarString(){
  //$('#stringMercancia').html("");
  $("#stringMercanciaTable tbody tr").remove();
  $('#stringMercanciaInput').val("");
  $('#f_total').val('0');
  $('#f_dcto').val('0');
  $('#f_vuelto').val('0');
  $('#f_total_final').val('0');
}

function agregarValorMercaderia() {
  if( $('#f_total').val() == "" )           $('#f_total').val('0');
  if( $('#f_dcto').val() == "" )            $('#f_dcto').val('0');
  if( $('#f_vuelto').val() == "" )          $('#f_vuelto').val('0');
  if( $('#f_total_final').val() == "" )     $('#f_total_final').val('0');
  
  var f_total_mercaderia =      parseInt( $('#f_total_mercaderia').val() );
  var f_total =  parseInt( f_total_mercaderia + parseInt($('#f_total').val()) );
  
  $('#f_total').val( f_total );
  calcularValoresTotales();
}

function calcularValoresTotales() {
  if( $('#f_total').val() == "" )           $('#f_total').val('0');
  if( $('#f_dcto').val() == "" )            $('#f_dcto').val('0');
  if( $('#f_vuelto').val() == "" )          $('#f_vuelto').val('0');
  if( $('#f_total_final').val() == "" )     $('#f_total_final').val('0');
  
  var f_total =  parseInt($('#f_total').val());
  var f_total_final =     parseInt( f_total - parseInt($('#f_dcto').val()) );
  
  $('#f_total_final').val( f_total_final );
  $('#top_total_final').text('TOTAL: $'+ f_total_final );
}

function calcularTotalMonto(){
  if( $('#f_num_mercaderia').val() == "" )          $('#f_num_mercaderia').val('0');
  if( $('#hme_precio').val() == "" )                $('#hme_precio').val('0');
  if( $('#f_total_mercaderia').val() == "" )        $('#f_total_mercaderia').val('0');
  
  var cantidad = parseInt( $('#f_num_mercaderia').val() );
  var precio = parseInt(  $('#hme_precio').val() );
  var resultado = parseInt(cantidad * precio);
  $('#f_total_mercaderia').val(resultado);
}

window.onload=function(){
calcularTotalMonto();
};
  
function getDataMercaderia(){
  var valor = $('#mer_codigo').val();
  if( valor != null && valor != "" ){
    var mercaderia = parseInt( valor );
    if( mercaderia > 0){
      $.post('/venta/ajaxfrombd', {mercaderia: mercaderia}, function (response){
        var record = response;
        $('#mer_articulo').val(record[0].mer_articulo);
        $('#col_nombre').val(record[0].col_nombre);
        $('#mer_foto').val(record[0].mer_foto);
        $('#mer_foto_mini').attr('src', "/img/mercaderia/" + record[0].mer_foto);
        $('#hme_precio').val(record[0].hme_precio);
        var i = 0;            //TALLAS
        $('#mer_id_mercaderia').empty();
        for(i=0; i<record.length ; i++){
          $('#mer_id_mercaderia').append($('<option>', { value : record[i].mer_id_mercaderia }).text(record[i].tal_talla));
          getDataPrecio();
        }
      }, 'json');
    } else {
        alert('Por favor pon un número mayor a 0.');
    }
  }else{
    $('#mer_articulo').val("");
    $('#col_nombre').val("");
    $('#mer_foto').val("");
    $('#hme_precio').val("");
    $('#mer_id_mercaderia').empty();
  }
}

function getDataPrecio(){
  var valor = $('#mer_id_mercaderia').val();
  if( valor != null && valor != "" ){
    var id_mercaderia = parseInt( valor );
    if( id_mercaderia > 0){
      $.post('/venta/ajaxfrombd', {id_mercaderia: id_mercaderia}, function (response){
        var record = response;
        $('#hme_precio').val(record[0].hme_precio);
        var cantidad = parseInt( $('#f_num_mercaderia').val() );
        var resultado = parseInt(cantidad * record[0].hme_precio);
        $('#f_total_mercaderia').val(resultado);
      }, 'json');
    }else{
      $('#hme_precio').val('0');
       // alert('Por favor pon un número mayor a 0.');
    }
  }else{
    $('#hme_precio').val('0');
  }
  calcularTotalMonto();
}

$("document").ready(function(){             //RECORRER LOS CAMPOS CON TAB
  $('[class*="jumper1"]').keypress(function(event){ //AGREGAR INVENTARIO
    if(event.which == 43){                  //AL HACER CLIC EN EL SIGNO 'MAS' (+)
    cb = parseInt($(this).attr('tabindex'));
      if(cb == 6) cb = 0;
      if ( $(":input[tabindex='" + (cb + 1) + "']") != null) {
        $(":input[tabindex='" + (cb + 1) + "']").focus();
        $(":input[tabindex='" + (cb + 1) + "']").select();
        //alert(cb);
        return false;
      }
      return false;
    }
  });
  
  $('[class*="jumper2"]').keypress(function(event){ //FORMA DE PAGO
    if(event.which == 43){                  //AL HACER CLIC EN EL SIGNO 'MAS' (+)
    cb = parseInt($(this).attr('tabindex'));
      if(cb == 4) cb = 0;
      if ( $(":input[tabindex='" + (cb + 1) + "']") != null) {
        $(":input[tabindex='" + (cb + 1) + "']").focus();
        $(":input[tabindex='" + (cb + 1) + "']").select();
        //alert(cb);
        return false;
      }
      return false;
    }
  });

  $('[class*="jumper3"]').keypress(function(event){ //DESCUENTO
    if(event.which == 43){                  //AL HACER CLIC EN EL SIGNO 'MAS' (+)
    cb = parseInt($(this).attr('tabindex'));
      if(cb == 2) cb = 0;
      if ( $(":input[tabindex='" + (cb + 1) + "']") != null) {
        $(":input[tabindex='" + (cb + 1) + "']").focus();
        $(":input[tabindex='" + (cb + 1) + "']").select();
        //alert(cb);
        return false;
      }
      return false;
    }
  });

});

$(document).ready(function() {               // ELIMINAR ENTER PARA ENVIAR FORM
    $("input:not(button)").keypress(function(e) {
        if (e.which == 13 ) {
            e.preventDefault();
            return false;
        }
    });
});

    // PARA OCULTAR OPCIONES EXTRA DE FORMA DE PAGO
var formaPagoExtra = function () {
  $("#tip_id_tipo_pago option:selected").each(function () {
    switch( $(this).val() ){
      case '1': //nada -
        $('#p_cheque').hide();  //cheque
        $('#p_credito_1').hide(); //cuotas
        $('#p_credito_2').hide(); //monto cuota
        $('#p_credito_smo').hide();      //observacion credito smo
      break;
      case '2': //Efectivo
        $('#p_cheque').hide();  //cheque
        $('#p_credito_1').hide(); //cuotas
        $('#p_credito_2').hide(); //monto cuota
        $('#p_credito_smo').hide();      //observacion credito smo
      break;
      case '3': //SMO Crédito
        $('#p_cheque').hide();  //cheque
        $('#p_credito_1').show(); //cuotas
        $('#p_credito_2').show(); //monto cuota
        $('#p_credito_smo').show();      //observacion credito smo
      break;
      case '4': //Redcompra
        $('#p_cheque').hide();  //cheque
        $('#p_credito_1').hide(); //cuotas
        $('#p_credito_2').hide(); //monto cuota
        $('#p_credito_smo').hide();      //observacion credito smo
      break;
      case '5': //Abono SMO
        $('#p_cheque').hide();  //cheque
        $('#p_credito_1').hide(); //cuotas
        $('#p_credito_2').hide(); //monto cuota
        $('#p_credito_smo').hide();      //observacion credito smo
      break;
      case '6': //Crédito (Visa/Mastercard/Etc)
        $('#p_cheque').hide();  //cheque
        $('#p_credito_1').show(); //cuotas
        $('#p_credito_2').show(); //monto cuota
        $('#p_credito_smo').hide();      //observacion credito smo
      break;
      case '7': //Crédito (ABCDIN)
        $('#p_cheque').hide();  //cheque
        $('#p_credito_1').show(); //cuotas
        $('#p_credito_2').show(); //monto cuota
        $('#p_credito_smo').hide();      //observacion credito smo
      break;
      case '8': //Crédito (PRESTO)
        $('#p_cheque').hide();  //cheque
        $('#p_credito_1').show(); //cuotas
        $('#p_credito_2').show(); //monto cuota
        $('#p_credito_smo').hide();      //observacion credito smo
      break;
      case '9': //Cheque
        $('#p_cheque').show();  //cheque
        $('#p_credito_1').hide(); //cuotas
        $('#p_credito_2').hide(); //monto cuota
        $('#p_credito_smo').hide();      //observacion credito smo
      break;
    };  //FIN SWITCH
  });
};

$("#tip_id_tipo_pago").change(formaPagoExtra).keyup(formaPagoExtra);
</script>